<template>
  <div>
    <h3>{{title}}</h3>
    <form>
      <div>
        <label for="username">用户名</label>
        <input type="text" :readonly="userData.id || false" id="username" placeholder="用户名" v-model="userData.username">
      </div>
      <div>
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" placeholder="昵称" v-model="userData.nickname">
      </div>
      <div>
        <label for="status">状态</label>
        <select id="status" v-model="userData.status">
          <option value="1">可用</option>
          <option value="2">禁用</option>
        </select>
      </div>
      <div>
        <button type="button" @click="submitInfo">确定</button>
        <button type="button" @click="$router.back()">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
const initData = {
  id: '',
  username: '',
  nickname: '',
  status: 1
}
export default {
  name: 'UserEdit',
  data () {
    return {
      userData: {
        ...initData
      }
    }
  },
  computed: {
    title () {
      return this.userData.id ? '修改数据' : '添加数据'
    }
  },
  methods: {
    submitInfo () {
      this.$http.post('user/add', this.userData, true).then(() => {
        alert(`${this.userData.id ? '修改成功' : '添加成功'}`)
        this.$router.back()
      })
    }
  },
  created () {
    const id = this.$route.query.id
    if (id) {
      this.$http.get(`user/info/${id}`).then(data => {
        this.userData = { ...data.data }
      })
    }
  }
}
</script>

<style scoped>

</style>
